<template>
  <div>
    <canvas id="barCode"></canvas>
  </div>
</template>
 
<script>
import JsBarcode from 'jsbarcode'
 
export default {
  name: 'BarcodeGenerator',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.generateBarCode()
  },
  watch: {
    text: function(val) {
      this.generateBarCode();
    }
  },
  methods: {
    generateBarCode() {
      /*JsBarcode(document.getElementById('barCode'), this.text, {
          background: '#eee',
          displayValue: true,
          // width: 1, // 
          height: 80, // 一维码的高度
          margin: 10 // 一维码与容器的margin
        })*/
      JsBarcode('#barCode', this.text, {
        background: '#eee',
        format: 'CODE128', //格式
        width: 2, // 条之间宽度
        height: 80, // 高度
        fontSize: 20, // 文本大小
        fontOptions: 'bold', // 字加粗体
        displayValue: true, // 在条形码下方显示文字
        lineColor: '#000', // 线条颜色
        margin: 10 // 条形码周围的空白区域
      })
    }
  }
}
</script>